<template>
  <div class="fantasy-shell">
    <div class="page">
      <ul>
        <li v-for="movie in movieList" :key="movie.id">
          <img :src="movie.posterPath" alt="小说图片">
          <div class="novel-page-info">
            <div class="page-title">
              <h2><a @click="detailsId(movie.movieId)">{{ movie.title }}</a></h2>
            </div>
            <div class="page-author">
              <span>导演：{{ movie.directors }}</span>
              <span class="page-novelInfo">主演：{{ movie.actors }}</span>
              <span>类别：{{ movie.genres }}</span>
              <span>上映时间：{{ movie.releaseDate }}</span>
              <span>时长：{{ movie.runtime }}分钟</span>
            </div>
            <div class="page-update">
              <span>评分：{{ movie.avgRating }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          layout="total, prev, pager, next, jumper"
          :total="movieList.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      movieList: [],
      // params: {name: "玄幻", page: 1, size: 10},
      params: {pageNum: 2, pageSize: 10},
    }
  },
  methods: {
    // 页码查询接口
    selectPages() {
      request({url: '/movie/movie/guessYouLike', method: "GET", params: this.params}).then(
          // (result) => {
        // this.novelData = result.data.data;
        // this.unitConversion(this.novelData.novels);
        // console.log("页码查询接口", this.novelData);
          response => {
            this.movieList = response.data.data;
            console.log("页码查询接口", this.movieList);
            console.log("code", this.movieList.code);
      })
    },
    // 页码改变按钮，则进行页码查询接口
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.selectPages()
    },
    // 跳转详情页
    detailsId(id) {
      console.log('^^^^^^id^^^^^^', id)
      this.$router.push({
        path: '/details',
        query: {id: id}
      })
    },
  },
  mounted() {
    // 页码查询接口
    this.selectPages()
  }
}
</script>

<style>
.fantasy-shell {
  width: 1200px;
  height: 1000px;
  margin: 0 auto;
  padding-top: 60px;
}

.page ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.page ul li {
  width: 48%;
  display: flex;
  margin-top: 40px;
}

.page ul li img {
  width: 180px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.novel-page-info {
  margin-left: 20px;
}

.page-title h2 a{
  font-size: 24px;
  font-weight: 500;
  line-height: 60px;
  color: #262626;
}

.page-author {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.page-author span {
  font-size: 16px;
  line-height: 25px;
}


.page-author .page-novelInfo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; /* 控制显示的最大行数 */
}

.page-update{
  font-size: 16px;
  //line-height: 40px;
  display: flex;
  justify-content: left;
  /*多行显示省略号*/
}

.page-update a{
  width: 70%;
  height: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
}

.block{
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
</style>
